<template>
    <div class="has-padding-sm">

        <div class="outline space-sm">
            <div class="heading">
                <div class="title">
                    <i class="icon-list"></i>
                    items
                </div>
                <nav class="nav">
                    <!--                    <a class="gray" @click="getIndex"><i class="icon icon-refresh"></i></a>-->
                    <!--                    <a class="btn info-pale text-tint" @click="showDisable()">{{availableBtnText}}</a>-->
                    <!--                    <a class="btn warning-pale text-tint" @click="multipleAvailableDialog(1)"><i class="icon icon-check"></i>{{this.$t('enable')}}</a>-->
                    <!--                    <a class="btn danger-pale text-tint" @click="multipleAvailableDialog(2)"><i class="icon icon-ban-circle"></i>{{this.$t('disable')}}</a>-->
                    <!--                    <a class="btn success-pale text-tint" @click="edit()">{{this.$t('create')}}</a>-->
                    <a class="gray rounded" @click="getIndex">
                        <i class="icon icon-refresh"></i>
                    </a>
                    <a class="gray rounded" @click="showDisable()">{{availableBtnText}}</a>
                    <a class="gray rounded" @click="multipleAvailableDialog(1)">
                        <i class="icon icon-check"></i>
                        {{this.$t('enable')}}
                    </a>
                    <a class="btn danger text-tint rounded" @click="multipleAvailableDialog(2)"><i
                            class="icon icon-ban-circle"></i>{{this.$t('disable')}}
                    </a>
                    <a class="btn success text-tint rounded" @click="editMenu()">{{this.$t('create')}}</a>

                </nav>
            </div>
            <div class="clearfix"></div>
        </div>

        <!--        <div class="row">-->
        <!--            <div class="cell-3">-->
        <!--                <div class="flex-1 modules">-->
        <!--                    <div v-for="item in result" class="box state hover space-xs">-->
        <!--                        {{item.name}}-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="cell-9">-->
        <!--                <div class="outline" style="margin-left: 1rem;width: 50%">-->
        <!--                    <div v-for="item in result">-->
        <!--                        {{item.name}}-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->

        <div class="box outline" style="width: 50%;">
            <div v-for="item in result" class="list">
                <div class="heading">
                    <div class="title">
                        <i class="icon-folder-open"></i>{{item.name}}
                        <a href="javascript:;" @click="editMenuSub(item.name)"><i class="icon icon-plus"></i></a>
                    </div>
                    <nav class="nav">
                        <a href="javascript:;" @click="editMenu(item.name)"><i class="icon icon-pencil"></i></a>

                    </nav>
                </div>
                <div class="list">
                    <div class="heading" v-for="item1 in item.authItemChildren">
                        <div class="title">{{item1.child}}</div>
                        <nav class="nav">
                            <a><i class="icon icon-pencil" @click="editMenuSub(item.name, item1.child)"></i></a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <Loading ref="loading"></Loading>
        <Toast ref="toast"></Toast>
        <Dialog ref="dialog"></Dialog>

    </div>
</template>
<script>
    import '@/assets/css/layer.css'
    import '@/assets/js/layer.js';
    import Dialog from "@/components/Dialog";
    import Loading from "@/components/Loading";
    import Toast from "@/components/Toast";
    import api from "../api/menu";

    export default {
        components: {Dialog, Toast, Loading},
        data() {
            return {
                result: {},
                selectedIds: [],
                showDisabled: false,
                availableBtnText: this.$t('ShowDisabled')
            }
        },
        mounted() {
            this.getIndex()
        },
        methods: {
            editMenu(name) {
                layer.open({
                    type: 2, // page层
                    area: ['800px', '80%'],
                    title: this.$t('create menu'),
                    shade: 0.5, // 遮罩透明度
                    moveType: 0, // 拖拽风格，0是默认，1是传统拖动
                    shift: -1, // 0-6的动画形式，-1不开启
                    content: name ? '/#/sys/rbac/menu/edit/' + name : '/#/sys/rbac/menu/edit'
                });
            },
            editMenuSub(parent, name) {
                layer.open({
                    type: 2, // page层
                    area: ['800px', '80%'],
                    title: this.$t('create menu sub'),
                    shade: 0.5, // 遮罩透明度
                    moveType: 0, // 拖拽风格，0是默认，1是传统拖动
                    shift: -1, // 0-6的动画形式，-1不开启
                    content: name ? '/#/sys/rbac/menu/edit-sub/' + parent + '/' + name : '/#/sys/rbac/menu/edit-sub/' + parent
                });
            },
            async getIndex() {
                let self = this;
                self.$refs.loading.start();
                self.selectedIds = [];
                api.getMenus().then(response => {
                    self.$refs.loading.stop();
                    if (response.meta.code == '000') {
                        self.result = response.data;
                    } else {
                        self.$refs.toast.show(response.meta.msg);
                    }
                }).catch(error => {
                    self.$refs.toast.show(self.$t('serve errors.'));
                    self.$refs.loading.stop();
                })
            },
        }
    }
</script>
<style scoped>
    .nav > a {
        height: 1.5rem;
        line-height: 1.5rem;
        /*margin-top: .25rem;*/
        margin-right: .25rem;
    }

    .modules div.state {
        cursor: pointer;
    }

    .modules div.state:last-child {
        margin-bottom: 0 !important;
    }

    .list .heading .title {
        padding: .25rem;
        opacity: 1;
        text-transform: none;
    }

    .list .list .item {
        padding: .25rem;
    }

</style>